<template>
	<div class="html_a">
		<van-nav-bar
		  title="申请客服介入"
		  left-arrow
		  @click-left="onClickLeft"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	   
	   	   	   
	    <div class="f1">
          <van-cell title="退款原因" :value="params.refundReason" @click="linkEdit"/>            
          <van-cell  :value="placeholder.goodsState" is-link  @click="showStatus=true">      	
			<template #title>
			    <span class="custom-title"><span style="color: #F12613;">*</span>货物状态</span>
			</template>          	
          </van-cell>           
	    </div>


	    <div class="f1" v-if="params.goodsState==0">
          <van-cell  :value="placeholder.description1" is-link @click="showDesc1=true">      	
			<template #title>
			    <span class="custom-title">问题描述</span>
			</template>          	
          </van-cell>   	  
	    </div>



	    <div class="f1" v-if="params.goodsState>0">
          <van-cell  :value="placeholder.description2" is-link @click="showDesc2=true">      	
			<template #title>
			    <span class="custom-title">问题描述</span>
			</template>          	
          </van-cell>   	  
	    </div>


	    <div class="f1"  v-if="params.goodsState>0">
		 <van-field
		  v-model="params.expressSn"
		  placeholder="请输入物流单号"
		  input-align="right"
		 >		 
		   <div slot="label">
		   	  <span style="color: #F12613;">*</span>
		   	  <span>物流单号</span>	
		   </div>
		 </van-field>
          <van-cell  :value="placeholder.express" is-link  @click="showExpress=true">      	
			<template #title>
			    <span class="custom-title"><span style="color: #F12613;">*</span>物流公司</span>
			</template>          	
          </van-cell>            
	    </div>		   	   	   
	   	   	   
	    <div class="f1">
		 <van-field
		  v-model="params.regions"
		  label="国家地区:"
		  placeholder="请输入国家地区"
		  input-align="right"
		 />
		 <van-field
		  v-model="params.phone"
		  label="联系电话:"
		  placeholder="请输入联系电话"
		  input-align="right"
		 />
		 <van-field
		  v-model="params.email"
		  label="邮箱:"
		  placeholder="请输入邮箱地址"
		  input-align="right"
		 />
	    </div>
	   
	   
	    <div class="footBtn">
	   	  <div class="wrap">
	   	  	<van-button type="default" block style="border-radius: none;" @click="cancleBack">取消并返回</van-button>
	   	  </div>
	   	  <div class="wrap">
	   	    <van-button color='#FFD530' block style="border-radius: none;" @click="addCustomerService">提交申请</van-button>
	   	  </div>
	    </div>
	    
	    <!--显示货物状态弹框-->
		<van-popup
		  v-model="showStatus"
		  position="bottom"
		  :style="{ height: '50%' }"
		  class="popup"
		>
		    <div class="popup_title">货物状态</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="statusActive=0">
		    		<div class="section2">未寄回</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="statusActive==0"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="statusActive=1">
		    		<div class="section2">已寄回</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="statusActive==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="selectGoodsState">确认</van-button>
		    </div>	   
		</van-popup>	    
	    
	    <!--问题描述1-->
		<van-popup
		  v-model="showDesc1"
		  position="bottom"
		  :style="{ height: '50%' }"
		  class="popup"
		>
		    <div class="popup_title">问题描述</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="descActive=1">
		    		<div class="section2">发票问题</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="descActive=2">
		    		<div class="section2">返回多付的运费</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive==2"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="confirmDesc1">确认</van-button>
		    </div>			    
		</van-popup>
		
	    <!--问题描述2-->
		<van-popup
		  v-model="showDesc2"
		  position="bottom"
		  :style="{ height: 'auto' }"
		  class="popup"
		>
		    <div class="popup_title">问题描述</div>		   
		    <div class="popup_wrap" style="margin-bottom: 80px;">
		    	<div class="selectWrap" @click="descActive2=1">
		    		<div class="section2">卖家已签收未处理</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive2==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="descActive2=2">
		    		<div class="section2">卖家拒绝签收</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive2==2"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="descActive2=3">
		    		<div class="section2">退货地址错误</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive2==3"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="descActive2=4">
		    		<div class="section2">卖家未反馈收到货</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="descActive2==4"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>			    	
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="confirmDesc2">确认</van-button>
		    </div>			    
		</van-popup>		
		
		
		<!--快递选择弹框-->
		<van-popup
		  v-model="showExpress"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		>
			<van-nav-bar
			  title="选择物流公司"
			  left-arrow
			>		
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showExpress=false"/>
		   </van-nav-bar>		
		   
		   
		   
	       <div class="express_list">
	       	   <div class="li" v-for="(item,index) in expressList" :key="index" @click="changeExpress(item,index)">
	       	   	 <span>{{item.expressName}}</span>
	       	   	 <span v-if="item.isShow"><img src="../../../../static/img/lanhu/85.png" alt="" style="width: 15px;"/></span>
	       	   </div>
	       </div>
		</van-popup>	    
    
	    <confirm ref="confirm" @queryConfirm="queryConfirm" 
	    	title="修改退款原因，需要您再和卖家协商,退款 原因变更后卖家可能会同意申请哦！"
	    	confirmTitle="确认要修改退款原因？"
	    	queryBtn='修改'
	    >
	    </confirm>  
	</div>	
</template>

<script>
import '@/assets/reset/btnReset.css'	
import {getFun} from '@/api/publicFun.js'	
import confirm from '_c/market/confirm.vue'
let publicFun=getFun()	
export default {	
	components: {
	    confirm
	},			
	data() {
       return {
          showStatus:false, // 显示货物状态弹框
          showExpress:false, // 快递选择弹框           
          showDesc1:false,  // 显示问题描述弹框1
          showDesc2:false,  // 显示问题描述弹框2   
          descActive:1,     // 问题描述选中值（未寄回状态）
          descActive2:1,    // 问题描述选中值（已寄回状态）
          statusActive:-1, // 货物状态显示的值
          url1:this.$api+'/marketorderservice/api/v1/market/orders/selectExpressList', // 获取物流公司列表
          url2:this.$api+'/marketorderservice/api/v1/market/refund/log/list',
          url3:this.$api+'/marketorderservice/api/v1/market/addCustomerService', // 生成客服介入的ID号
          expressList:[],  // 记录快递公司列表
          placeholder:{    // 储存默认值
          	express:'请选择物流公司',
          	goodsState:'请选择',
          	description1:'请选择问题描述', // 选择未寄回时 问题描述的默认值
          	description2:'请选择问题描述', // 选择已寄回时 问题描述的默认值
          },
          params:{   
          	refundId:'', // 退货退款的ID号
          	expressName:'',  // 快递公司 
          	email:'',  // 电子邮箱
          	phone:'',  // 联系电话
          	regions:'', // 国家地区
          	refundReason:'其他', //退款原因
          	expressSn:'', // 物流单号
          	goodsState:-1, // 商品状态
          	description:'', // 问题描述
          },
          ordersId:""
       }
	},
	methods: {
	   // 确认问题描述1
	   confirmDesc1(){
	   	 if(this.descActive==1){
	   	 	this.placeholder.description1='发票问题'
	   	 	this.params.description='发票问题'
	   	 }else if(this.descActive==2){
	   	 	this.placeholder.description1='返回多付的运费'
	   	 	this.params.description='返回多付的运费'
	   	 }
	   	 this.showDesc1=false
	   },
	   // 确认问题描述2
	   confirmDesc2(){
	   	 if(this.descActive2==1){
	   	 	this.placeholder.description2='卖家已签收未处理'
	   	 	this.params.description='卖家已签收未处理'
	   	 }else if(this.descActive2==2){
	   	 	this.placeholder.description2='卖家拒绝签收'
	   	 	this.params.description='卖家拒绝签收'
	   	 }else if(this.descActive2==3){
	   	 	this.placeholder.description2='退货地址错误'
	   	 	this.params.description='退货地址错误'
	   	 }else if(this.descActive2==4){
	   	 	this.placeholder.description2='卖家未反馈收到货'
	   	 	this.params.description='卖家未反馈收到货'
	   	 }
	   	 this.showDesc2=false	   	
	   },
	   // 添加申请记录
	   addCustomerService(){	   	 
	   	 if(this.params.goodsState<0){
	   	 	this.$toast('请选择货物状态')
	   	 	return false
	   	 }
	   	 if(this.params.goodsState>0){
	   	 	if(!this.params.expressSn||!this.params.expressName){
		   	 	this.$toast('请输入物流单号或物流公司')
		   	 	return false	   	 		
	   	 	}
	   	 }
       	 let that=this
       	 this.$Axios2.Post(this.url3,this.params).then(function(res){ 
       	 	 let arg='[{"refundId":"'+that.params.refundId+'"}]'
             that.link('/market/intervention/detail',arg)
       	 }) 	   	 
	   },
	   // 取消并返回
	   cancleBack(){
//	   	 let arg='[{"refundId":"'+this.params.refundId+'"}]'
//	   	 this.link('/market/orders/refunds',arg)
	   	 this.closeWin()
	   },	   
	   // 返回修改订单页
	   queryConfirm(){
	   	 let arg='[{"refundId":"'+this.params.refundId+'"},{"ordersId":"'+this.ordersId+'"}]' 
	   	 this.link('/market/orders/modify',arg)
	   },
	   // 修改退款原因
	   linkEdit(){
	   	  this.$refs.confirm.showWin()
	   },
	   // 选择货物状态	
	   selectGoodsState(){
          if(this.statusActive<0){
          	this.$toast('请选择货物状态')
          	return false
          }else if(this.statusActive==0){
          	this.placeholder.goodsState='未寄回'
          	this.params.goodsState=0
          	this.showStatus=false
          }else if(this.statusActive==1){
          	this.placeholder.goodsState='已寄回'
          	this.params.goodsState=1
          	this.showStatus=false
          }
	   },
	   // 选择物流
	   changeExpress(item,index){
	   	 for(var i=0;i<this.expressList.length;i++){
	   	 	if(i==index){
	   	 	   this.expressList[i].isShow=true	
	   	 	}else{
	   	 	   this.expressList[i].isShow=false
	   	 	}
	   	 }
	   	 this.placeholder.express=item.expressName
	   	 this.params.expressName=item.expressName
	   	 this.showExpress=false
	   },
	   // 获取物流公司接口	
       getExpressList(){
       	  let that=this
       	  this.$Axios2.Post(this.url1,{expressState:1}).then(function(res){
       	  	for(var i=0;i<res.data.length;i++){
       	  		res.data[i].isShow=false
       	  		that.expressList.push(res.data[i])
       	  	}
       	  })       	
       },
       // 获取数据
       getData(){
       	  let that=this
       	  this.$Axios2.Post(this.url2,{refundId:this.params.refundId}).then(function(res){       	  
            that.params.refundReason=res.data.refundRVo.refund.refundReason
            that.ordersId=res.data.refundRVo.refund.ordersId
       	  })        	
       },
       
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.params.refundId=this.$router.currentRoute.query.refundId;
		this.getExpressList()	
		this.getData()	
	}
}	
</script>

<style scoped="" lang="scss">
.van-cell{padding-left: 0;padding-right: 0;}
.html_a{background: #f8f8f8;min-height: 100%;width: 100%;position: absolute;}
.f1{margin-top: 10px;padding: 0 20px;background: #fff;
  .item{padding: 15px 0;display: flex;justify-content: space-between;
    .word1{color: #999;font-size: 12px;}
  }
}
.footBtn{display: flex;position: absolute;bottom: 0;left: 0;width: 100%;
  .wrap{flex: 1;}
}
.popup{
	.popup_title{font-size: 14px;padding: 21px;text-align: center;font-weight: 500;}	
	.popup_btn{position: absolute;bottom: 0;left: 0;width: 100%;}	
	.popup_wrap{margin-top: 10px;background: #fff;padding: 0 20px;
	 .selectWrap{padding: 15px 0;display: flex;align-items: center;border-bottom: 1px solid #f0f0f0;}
	 .selectWrap:nth-last-child(1){border:none}
	 .section3 img{width: 14px;display: block;}
	 .section2{flex: 1;}   
	}		
}

.express_list{margin-top: 10px;padding: 0 15px;
   .li{padding: 15px 0;border-bottom:1px solid #f0f0f0;font-size: 14px;display: flex;justify-content: space-between;}
}
</style>